<template>
  <view>
    <my-message-top :text="'猫咪名片'"></my-message-top>
    <my-search :text="'搜索猫咪名称'" :bcolor="'#F4F4F4'"></my-search>
    
    <view class="cat-card" v-for="(item,i) in cardList" :key="i" @click="gotoCatDetails(item)">
      <image :src="item.img" mode=""></image>
      <view class="cat-card-img">
        <image src="/static/cat-card/path6.png" mode="" class="cat-card-p1"></image>
        <image src="/static/cat-card/rectangle148.png" mode="" class="cat-card-p2"></image>
      </view>
      <text>{{item.name}}</text>
    </view>
  </view>
</template>

<script>
  import {getCatCard} from '../../api/cat.js'
  export default {
    data() {
      return {
        queryObj:{
          curPage: 1,
          pageSize: 3
          },
          cardList: [],
          total: 0,
          isloading: false
      };
    },
    onLoad(){
      this.getCatCard() 
    },
    methods:{
      async getCatCard(cb){
        this.isloading = true
        const {data:data} = await getCatCard(this.queryObj)
        this.isloading = false
        
        cb && cb()
        
        console.log(data);
        this.cardList = [...this.cardList,...data.data.ketties]
        this.total = data.data.totalPages
        console.log(this.cardList);
      },
      gotoCatDetails(item){
        uni.navigateTo({
          url: '/subpkg/Cat-Details/Cat-Details?id=' + item.id
        })
      }
    },
    onReachBottom(){
      if(this.queryObj.pageSize * this.queryObj.curPage >= this.total) return
      if(this.isloading) return
      this.queryObj.curPage += 1
      this.getCatCard()
    },
    onPullDownRefresh(){
      this.queryObj.curPage = 1,
      this.total=0,
      this.isloading=false,
      this.cardList=[]
      
      this.getCatCard(() => uni.stopPullDownRefresh())
    }
    
  }
</script>

<style lang="scss">
.cat-card{
  width: 680rpx;
  height: 446rpx;
  background-image: url('~@/static/cat-card/rectangle86.png');
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin: 80rpx 25rpx;
  image{
    padding-top: 25rpx;
    width: 500rpx;
    height: 300rpx;
  }
  .cat-card-img{
    position: relative;
    .cat-card-p1{
      position: absolute;
      width: 158rpx;
      height: 140rpx;
      top: -379rpx;
      left: -335rpx;
    }
    .cat-card-p2{
      position: absolute;
      width: 680rpx;
      height: 92rpx;
      top: -17rpx;
      left: -333rpx;
     
    }
  }
  text{
    font-size: 18px;
    font-weight: bold;
    color: #868686;
     z-index: 999;
  }
}
</style>
